<template>
  <b-container fluid>
    <h2>GOLDEN FLOWERS</h2>
    <b-alert show>{{'总额: ' + allScore + ' 最新状态:' + message}}</b-alert>

    <b-container class="my-1" v-for="player in players" :key="player.name" v-if="player.name !== my.name">
      <b-row>
        <b-col cols="4">{{player.name}}</b-col>
        <b-col left>
          <b-btn>{{'剩余分数: ' + player.score}}</b-btn>
          <b-btn> {{calculateStatus(player.status)}}</b-btn>
        </b-col>
      </b-row>
      <b-container fluid class="bg-write" v-if="player.status === 1 || player.status === 2">
        <b-row>
          <b-col>
            <b-img fluid src="../../static/joker.jpg" alt="Thumbnail"></b-img>
          </b-col>
          <b-col>
            <b-img fluid src="../../static/joker.jpg" alt="Thumbnail"></b-img>
          </b-col>
          <b-col>
            <b-img fluid src="../../static/joker.jpg" alt="Thumbnail"></b-img>
          </b-col>
        </b-row>
      </b-container>
    </b-container>

    <div style="margin-top: 10% ">
      <b-btn variant="success" v-if="my.name!==''" :disabled="!(my.operationStatus ===1 && my.status === 1)"
             @click="watch">
        看牌
      </b-btn>
      <b-btn variant="success" v-if="my.name!==''"
             :disabled="!(my.operationStatus ===1 && (my.status === 1 || my.status ===2))"
             @click="call">
        跟注
      </b-btn>
      <b-btn variant="success" v-if="my.name!==''"
             :disabled="!(my.operationStatus ===1 && (my.status === 1 || my.status ===2))"
             @click="chooseBattle">
        比牌
      </b-btn>
      <b-btn variant="success" v-if="my.name !== ''"
             :disabled="!(my.operationStatus ===1 && (my.status === 1 || my.status ===2))"
             @click="giveUp">
        弃牌
      </b-btn>
    </div>
    <b-alert
      :show="dismissCountDown"
      dismissible
      variant="danger"
      @dismissed="dismissCountDown=0"
      @dismiss-count-down="countDownChanged">
      <p>请在 {{ dismissCountDown }} 秒内操作, 否则视为弃牌!</p>
      <b-progress variant="warning" :max="dismissSecs" :value="dismissCountDown" height="4px"></b-progress>
    </b-alert>
    <b-container class="my-1" v-if="my.name !== ''">
      <b-row>
        <b-col cols="4">{{my.name}}</b-col>
        <b-col left>
          <b-btn>{{'剩余分数: ' + my.score}}</b-btn>
        </b-col>
      </b-row>
      <b-container fluid class="bg-write" v-if="my.status === 1">
        <b-row>
          <b-col>
            <b-img fluid src="../../static/joker.jpg" alt="Thumbnail"></b-img>
          </b-col>
          <b-col>
            <b-img fluid src="../../static/joker.jpg" alt="Thumbnail"></b-img>
          </b-col>
          <b-col>
            <b-img fluid src="../../static/joker.jpg" alt="Thumbnail"></b-img>
          </b-col>
        </b-row>
      </b-container>
      <b-container fluid class="bg-write" v-if="my.status > 1">
        <b-row>
          <b-col v-for="(poker,index) in my.pokers" :key="index">
            <div style="position: relative">
              <b-img v-if="poker.color === 1" fluid src="../../static/blackFlower.jpg" alt="Thumbnail"></b-img>
              <b-img v-if="poker.color === 2" fluid src="../../static/redPeach.jpg" alt="Thumbnail"></b-img>
              <b-img v-if="poker.color === 3" fluid src="../../static/blackPeach.jpg" alt="Thumbnail"></b-img>
              <b-img v-if="poker.color === 4" fluid src="../../static/squarePiece.jpg" alt="Thumbnail"></b-img>
              <span style="position: absolute ;top:30%;left:40%;font-size:x-large">{{poker.numberStr}}</span>
            </div>
          </b-col>
        </b-row>
      </b-container>
    </b-container>

    <b-modal title="输入你的大名" hide-header-close ok-only @ok="handleOk"
             v-model="showInputMyName">
      <form>
        <b-form-input type="text" v-model="inputName" placeholder="输入你的大名"></b-form-input>
      </form>
    </b-modal>

    <b-modal title="最终结果" hide-header-close ok-only size="sm" v-model="showGameResult">
      <p class="my-4" v-for="(message,index) in gameResultMessage" :key="index">{{message}}</p>
    </b-modal>
    <b-modal title="比牌" hide-header-close ok-only centered size="sm" @ok="battle"
             v-model="showChooseBattle">
      <b-row class="mb-1">
        <b-col cols="3">选择比牌的人:</b-col>
        <b-col>
          <b-form-select :options="battleList" v-model="opponentName"></b-form-select>
        </b-col>
      </b-row>
    </b-modal>

    <div style="margin-top: 10% ">
      <b-btn variant="success" v-if="my.name==='' || my.name.length===0" @click="clickJoin">
        加入游戏
      </b-btn>
      <b-btn variant="success" v-if="my.status === -1 || my.status === 4" @click="ready">
        准备
      </b-btn>
    </div>

  </b-container>
</template>

<script>
import webSocket from '../utils/webSocket'

export default {
  name: 'GoldenFlowers',
  data: function () {
    /**
       * status -1 加入成功 0 准备中 1 暗牌 2 看牌 3 弃牌 4 结束
       * 结束
       */
    return {
      dismissCountDown: 0,
      dismissSecs: 10,
      players: [],
      battleList: [],
      inputName: '',
      my: {
        name: '',
        pokers: [],
        status: -2,
        score: 200,
        operationStatus: 0
      },
      showInputMyName: false,
      showGameResult: false,
      message: '欢迎加入游戏',
      socket: null,
      gameResultMessage: [],
      allScore: 0,
      showChooseBattle: false,
      opponentName: ''
    }
  },
  mounted () {
    let that = this
    that.socket = webSocket.initSocket(that.showMessage, 'GoldenFlowers')
    // 接收到消息的回调方法
    this.socket.onmessage = function (event) {
      let typeMessage = event.data.split(webSocket.messageSeparator)
      let type = parseInt(typeMessage[0])
      let message = typeMessage[1]

      switch (type) {
        case webSocket.JOIN_SUCCESS:
          that.my.name = that.inputName
          that.my.status = -1
          break
        case webSocket.JOIN_FAILED:
          that.showMessage('已经有人叫' + that.inputName + '了,换个名字吧')
          break
        case webSocket.SHOW_MESSAGE :
          that.showMessage(message)
          break
        case webSocket.UPDATE_DATA :
          that.players = JSON.parse(message)
          that.players.forEach(p => {
            if (p.name === that.my.name) {
              that.my = p
              if (that.my.operationStatus === 1 && (that.my.status === 1 || that.my.status === 2)) {
                that.dismissCountDown = that.dismissSecs
              } else {
                that.dismissCountDown = 0
              }
            }
          })
          that.allScore = typeMessage[2]
          break
        case webSocket.GAME_OVER:
          that.gameResultMessage = []
          that.gameResultMessage.push(message)

          that.showGameResult = true
      }
    }
  },
  methods: {
    calculateStatus: function (status) {
      switch (status) {
        case -1:
          return '加入'
        case 0:
        case 4:
          return '准备'
        case 1:
          return '暗牌'
        case 2:
          return '看牌'
        case 3:
          return '弃牌'
      }
    },
    sendMessage: function (type, message) {
      let sendMessage = type + webSocket.messageSeparator + message
      this.socket.send(sendMessage)
    },
    showMessage: function (message) {
      this.message = message
    },
    clickJoin: function () {
      this.showInputMyName = true
      this.inputName = ''
    },
    handleOk: function () {
      this.sendMessage(webSocket.JOIN_GAME, this.inputName)
    },
    ready: function () {
      this.sendMessage(webSocket.START_GAME, this.inputName)
    },
    watch: function () {
      this.sendMessage(webSocket.LOOK_CARDS, this.inputName)
    },
    call: function () {
      this.sendMessage(webSocket.CHECK, this.inputName)
    },
    chooseBattle: function () {
      let that = this
      this.battleList = []
      this.players.forEach(player => {
        if (player.status === 1 || player.status === 2) {
          if (player.name !== that.my.name) {
            that.battleList.push(player.name)
          }
        }
      })
      this.showChooseBattle = true
    },
    battle: function () {
      if (this.opponentName.length === 0) {
        alert('请选择比牌对手')
      } else {
        this.sendMessage(webSocket.BATTLE, this.opponentName)
      }
    },
    giveUp: function () {
      this.sendMessage(webSocket.GIVE_UP, this.inputName)
    },
    countDownChanged (dismissCountDown) {
      this.dismissCountDown = dismissCountDown
      if (dismissCountDown === 0 && (this.my.status === 1 || this.my.status === 2)) {
        this.giveUp()
      }
    }
  }
}

</script>

<style scoped>
  .my-1 {
    text-align: left;
  }

  .my-4 {
    text-align: left;
  }
</style>
